import { Button, Card, Input, message, Modal, Table } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import testData from "../resourceManage/testData";
import BusinessModal from "./businessModal";
import { businessList, businessRemove } from "@/services/chargingManage";
import moment from "moment";

class BusinessManage extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      search:"",
      loading:false,
      list:[],
      total:0
    }
  }

  componentDidMount(){
    this.getList()
  }
  
  getList = () => {
    this.setState({loading:true},async () => {
      const { current,size,search } = this.state;
      const res = await businessList({current,size,search})
      this.setState({
        loading:false,
        list:res.records,
        total:res.total
      })
    })
  }

  doSearch = (current,size) => {
    this.setState({current,size},() => {
      this.getList()
    })
  }

  openModal = id => {
    this.BusinessModal.initModal(id)
  }

  removeConfirm = id => {
    Modal.confirm({
      title: formatMessage({ id: 'chargingManage.businessManage.index.confirmDelete' }),
      okText: formatMessage({ id: 'chargingManage.businessManage.index.confirm' }),
      cancelText: formatMessage({ id: 'chargingManage.businessManage.index.cancel' }),
      okType:"danger",
      onOk:() => {
        this.doRemove(id)
      }
    })
  }

  doRemove = async id => {
    const res = await businessRemove({id})
    message.info(res.message)
    this.getList()
  }

  render(){
    const { current,size,search,loading,list,total } = this.state;
    const columns = [
      {
        title: formatMessage({ id: 'chargingManage.businessManage.index.companyName' }),
        dataIndex:"name",
        width:200
      },
      {
        title: formatMessage({ id: 'chargingManage.businessManage.index.platformLocation' }),
        dataIndex:"locationType",
        width:100,
        render:type => {
          return type == 0 ? '所有方' : type == 1 ? '服务方' : type == 2 ? '用户方' : ''
        }
      },
      {
        title: formatMessage({ id: 'chargingManage.businessManage.index.useLocation' }),
        dataIndex:"useType",
        width:100,
        render:useType => {
          let useTypeList = useType ? useType.split(",") : []
          let list = []
          for(const item of useTypeList){
            let text = item == 0 ? '签约方' : item == 1 ? '使用方' : item == 2 ? '结算方' : ''
            list.push(text)
          }

          return list.toString()
        }
      },
      {
        title: formatMessage({ id: 'chargingManage.businessManage.index.admin' }),
        dataIndex:"userName",
        width:100
      },
      {
        title: formatMessage({ id: 'chargingManage.businessManage.index.contactPhone' }),
        dataIndex:"userPhone",
        width:100
      },
      {
        title: formatMessage({ id: 'chargingManage.businessManage.index.createTime' }),
        dataIndex:"createTime",
        width:150,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title: formatMessage({ id: 'chargingManage.businessManage.index.operation' }),
        width:120,
        render:(text,row) =>  {
          return (
            <div>
              <Button type="primary" style={{marginRight:8}} size="small" onClick={() => this.openModal(row.id)}>{formatMessage({ id: 'chargingManage.businessManage.index.edit' })}</Button>
              <Button type="danger" size="small" onClick={() => this.removeConfirm(row.id)}>{formatMessage({ id: 'chargingManage.businessManage.index.delete' })}</Button>
            </div>
          )
        }
      }
    ]

    return (
      <Card bordered={false} style={{minHeight:"100%"}}>
        <div className="topOptionBox">
          <Input.Search placeholder={formatMessage({ id: 'chargingManage.businessManage.index.searchCompany' })} style={{width:200}} value={search} onChange={e => this.setState({search:e.target.value})} onSearch={() => this.doSearch(1,size)} />
          <Button type="primary" onClick={() => this.openModal()}>{formatMessage({ id: 'chargingManage.businessManage.index.addNew' })}</Button>
        </div>

        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          scroll={{x:"auto"}}
          pagination={{
            current,
            pageSize:size,
            showQuickJumper:true,
            onChange:this.doSearch,
            total
          }}
        />

        <BusinessModal onRef={ref => this.BusinessModal = ref} refreshList={this.getList} />
      </Card>
    )
  }
}

export default BusinessManage